<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧题库 - 管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f90ff',
                        accent: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        muted: '#64748b',
                        'sidebar-bg': '#f8fafc',
                        'sidebar-item': '#64748b',
                        'sidebar-item-active': '#2563eb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 15px 35px -5px rgba(37, 99, 235, 0.15)',
                        'sidebar': '0 0 20px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        };
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-education {
                background-image: 
                    radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 20%),
                    radial-gradient(circle at 80% 30%, rgba(79, 144, 255, 0.05) 0%, transparent 25%),
                    radial-gradient(circle at 40% 70%, rgba(16, 185, 129, 0.05) 0%, transparent 30%),
                    radial-gradient(circle at 90% 90%, rgba(37, 99, 235, 0.05) 0%, transparent 20%);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.15);
            }
            .education-icon {
                text-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
            }
            .stat-card {
                background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
            }
            .chart-container {
                position: relative;
                height: 200px;
            }
            .sidebar-item {
                @apply flex items-center space-x-3 px-4 py-3 text-sidebar-item rounded-lg transition-all duration-200 cursor-pointer;
            }
            .sidebar-item:hover {
                @apply bg-primary/5 text-sidebar-item-active;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-sidebar-item-active font-medium;
            }
            .nav-item {
                @apply relative px-4 py-3 text-muted hover:text-primary transition-colors cursor-pointer;
            }
            .nav-item.active {
                @apply text-primary font-medium;
            }
            .nav-item.active::after {
                content: '';
                @apply absolute bottom-0 left-0 w-full h-0.5 bg-primary rounded-full;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col bg-education">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-primary/10 animate-float">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-6xl education-icon">
                <i class="fa fa-book"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-20 w-60 h-60 rounded-full bg-secondary/10 animate-float" style="animation-delay: -2s">
            <div class="w-full h-full flex items-center justify-center text-secondary/20 text-7xl education-icon">
                <i class="fa fa-graduation-cap"></i>
            </div>
        </div>
        <div class="absolute top-1/3 right-1/4 w-32 h-32 rounded-full bg-accent/10 animate-float" style="animation-delay: -4s">
            <div class="w-full h-full flex items-center justify-center text-accent/20 text-5xl education-icon">
                <i class="fa fa-lightbulb-o"></i>
            </div>
        </div>
        <div class="absolute bottom-1/3 left-1/3 w-28 h-28 rounded-full bg-primary/10 animate-float" style="animation-delay: -1s">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-4xl education-icon">
                <i class="fa fa-pencil-square-o"></i>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                    <i class="fa fa-question-circle"></i>
                </div>
                <h1 class="text-xl font-bold text-dark ml-0 md:ml-[-2rem]">智慧题库管理系统</h1>
            </div>
            
            <!-- 顶部导航 -->
            <div class="hidden md:flex items-center space-x-2">
                <div class="nav-item active" data-section="dashboard">
                    <i class="fa fa-home mr-2"></i> 仪表盘
                </div>
                <div class="nav-item" data-section="question">
                    <i class="fa fa-book mr-2"></i> 题库管理
                </div>
                <div class="nav-item" data-section="exam">
                    <i class="fa fa-graduation-cap mr-2"></i> 考试管理
                </div>
                <div class="nav-item" data-section="statistics">
                    <i class="fa fa-bar-chart mr-2"></i> 数据分析
                </div>
                <div class="nav-item" data-section="settings">
                    <i class="fa fa-cog mr-2"></i> 系统设置
                </div>
            </div>
            
            <div class="flex items-center space-x-4">
                <button class="p-2 text-muted hover:text-primary transition-colors relative">
                    <i class="fa fa-bell"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
                </button>
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <span class="hidden md:inline text-sm font-medium text-dark">张老师</span>
                    <i class="fa fa-angle-down text-muted"></i>
                </div>
                <button class="md:hidden p-2 text-muted hover:text-primary transition-colors" id="mobile-menu-button">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow flex">
        <!-- 左侧导航栏 -->
        <aside id="sidebar" class="w-64 bg-sidebar-bg shadow-sidebar transition-all duration-300 h-[calc(100vh-64px)] sticky top-[64px] overflow-y-auto">
            <!-- 仪表盘菜单 -->
            <div id="dashboard-menu" class="sidebar-menu active">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-sm font-medium text-muted uppercase tracking-wider">仪表盘</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item active">
                        <i class="fa fa-tachometer"></i>
                        <span>数据概览</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-line-chart"></i>
                        <span>趋势分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-pie-chart"></i>
                        <span>数据报表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-bullhorn"></i>
                        <span>系统通知</span>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理菜单 -->
            <div id="question-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-sm font-medium text-muted uppercase tracking-wider">题库管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="fa fa-list-alt"></i>
                        <span>题目列表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-plus-circle"></i>
                        <span>添加题目</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-folder"></i>
                        <span>题目分类</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-tags"></i>
                        <span>标签管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-flag"></i>
                        <span>待审核题目</span>
                    </div>
                </div>
            </div>
            
            <!-- 考试管理菜单 -->
            <div id="exam-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-sm font-medium text-muted uppercase tracking-wider">考试管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="fa fa-calendar"></i>
                        <span>考试安排</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-file-text-o"></i>
                        <span>试卷管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-plus-circle"></i>
                        <span>创建试卷</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-users"></i>
                        <span>考生管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-check-square-o"></i>
                        <span>成绩管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析菜单 -->
            <div id="statistics-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-sm font-medium text-muted uppercase tracking-wider">数据分析</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="fa fa-bar-chart"></i>
                        <span>答题统计</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-area-chart"></i>
                        <span>学习进度</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-pie-chart"></i>
                        <span>正确率分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-user-circle"></i>
                        <span>用户行为</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-download"></i>
                        <span>数据导出</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置菜单 -->
            <div id="settings-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-sm font-medium text-muted uppercase tracking-wider">系统设置</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="fa fa-globe"></i>
                        <span>站点设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-user-plus"></i>
                        <span>注册设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-cog"></i>
                        <span>基础设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-shield"></i>
                        <span>安全设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-users"></i>
                        <span>角色权限</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="fa fa-database"></i>
                        <span>数据备份</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 内容区域 -->
        <div class="flex-grow p-6">
            <!-- 仪表盘内容 -->
            <div id="dashboard-content" class="content-section active">
                <!-- 页面标题 -->
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">数据概览</h2>
                    <p class="text-muted mt-2">今日是 <span id="currentDate" class="font-medium text-dark"></span>，题库管理系统为您提供全面的试题管理功能</p>
                </div>
                
                <!-- 数据统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">总题目数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">1,284</h3>
                                <p class="text-accent text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                                <i class="fa fa-question-circle text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">用户总数</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">3,521</h3>
                                <p class="text-accent text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8% 较上月
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center text-secondary">
                                <i class="fa fa-users text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">今日答题</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">247</h3>
                                <p class="text-muted text-sm mt-2 flex items-center">
                                    <i class="fa fa-minus mr-1"></i> 与昨日持平
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent">
                                <i class="fa fa-check-circle text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card rounded-2xl p-6 card-hover">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-muted text-sm">待审核题目</p>
                                <h3 class="text-3xl font-bold text-dark mt-1">16</h3>
                                <p class="text-primary text-sm mt-2 flex items-center cursor-pointer hover:underline">
                                    <i class="fa fa-angle-right mr-1"></i> 去审核
                                </p>
                            </div>
                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                                <i class="fa fa-clock-o text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据图表和最近活动 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 答题趋势图表 -->
                    <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-card">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-bold text-dark">本周答题趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">周</button>
                                <button class="px-3 py-1 text-sm text-muted hover:bg-gray-100 rounded-lg">月</button>
                                <button class="px-3 py-1 text-sm text-muted hover:bg-gray-100 rounded-lg">年</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <!-- 这里会显示答题趋势图表 -->
                            <svg class="w-full h-full" viewBox="0 0 800 200">
                                <defs>
                                    <linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                        <stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#4f90ff;stop-opacity:0.5" />
                                    </linearGradient>
                                </defs>
                                <path d="M20,150 C40,120 60,180 80,140 C100,100 120,130 140,110 C160,90 180,120 200,100 C220,80 240,110 260,90 C280,70 300,100 320,80 C340,60 360,90 380,70 C400,50 420,80 440,60 C460,40 480,70 500,50 C520,30 540,60 560,40 C580,20 600,50 620,30 C640,10 660,40 680,20 C700,0 720,30 740,10 C760,-10 780,20 800,0" 
                                      fill="url(#primaryGradient)" fill-opacity="0.2" stroke="#2563eb" stroke-width="2" />
                                <path d="M20,150 C40,120 60,180 80,140 C100,100 120,130 140,110 C160,90 180,120 200,100 C220,80 240,110 260,90 C280,70 300,100 320,80 C340,60 360,90 380,70 C400,50 420,80 440,60 C460,40 480,70 500,50 C520,30 540,60 560,40 C580,20 600,50 620,30 C640,10 660,40 680,20 C700,0 720,30 740,10 C760,-10 780,20 800,0" 
                                      stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <!-- 数据点 -->
                                <circle cx="20" cy="150" r="4" fill="#2563eb" />
                                <circle cx="80" cy="140" r="4" fill="#2563eb" />
                                <circle cx="140" cy="110" r="4" fill="#2563eb" />
                                <circle cx="200" cy="100" r="4" fill="#2563eb" />
                                <circle cx="260" cy="90" r="4" fill="#2563eb" />
                                <circle cx="320" cy="80" r="4" fill="#2563eb" />
                                <circle cx="380" cy="70" r="4" fill="#2563eb" />
                                <circle cx="440" cy="60" r="4" fill="#2563eb" />
                                <circle cx="500" cy="50" r="4" fill="#2563eb" />
                                <circle cx="560" cy="40" r="4" fill="#2563eb" />
                                <circle cx="620" cy="30" r="4" fill="#2563eb" />
                                <circle cx="680" cy="20" r="4" fill="#2563eb" />
                                <circle cx="740" cy="10" r="4" fill="#2563eb" />
                                <circle cx="800" cy="0" r="4" fill="#2563eb" />
                            </svg>
                        </div>
                    </div>
                    
                    <!-- 最近活动 -->
                    <div class="bg-white rounded-2xl p-6 shadow-card">
                        <h3 class="text-lg font-bold text-dark mb-6">最近活动</h3>
                        <div class="space-y-4">
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary mt-1">
                                    <i class="fa fa-plus"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">李同学 <span class="text-muted">刚刚</span> 添加了一道数学题</p>
                                    <p class="text-xs text-muted mt-1">代数 > 方程求解</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center text-secondary mt-1">
                                    <i class="fa fa-pencil"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">王老师 <span class="text-muted">10分钟前</span> 编辑了英语试卷</p>
                                    <p class="text-xs text-muted mt-1">英语 > 期末考试卷</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-accent/10 rounded-full flex items-center justify-center text-accent mt-1">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">系统 <span class="text-muted">30分钟前</span> 自动备份了题库数据</p>
                                    <p class="text-xs text-muted mt-1">备份编号: BK202306210930</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary mt-1">
                                    <i class="fa fa-user-plus"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">管理员 <span class="text-muted">1小时前</span> 添加了新用户</p>
                                    <p class="text-xs text-muted mt-1">张同学 - 学生角色</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center text-secondary mt-1">
                                    <i class="fa fa-flag"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-dark">系统 <span class="text-muted">2小时前</span> 检测到16道待审核题目</p>
                                    <p class="text-xs text-muted mt-1">
                                        <a href="#" class="text-primary hover:underline">前往审核</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="mt-6 block text-center text-primary text-sm hover:underline">查看所有活动</a>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理内容 -->
            <div id="question-content" class="content-section hidden">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">题库管理</h2>
                    <p class="text-muted mt-2">管理所有试题，支持添加、编辑和分类等操作</p>
                </div>
                <!-- 题库管理内容 -->
                <div class="bg-white rounded-2xl p-6 shadow-card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                        <div class="flex items-center space-x-2 mb-4 md:mb-0">
                            <button class="px-4 py-2 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-colors">
                                <i class="fa fa-plus mr-2"></i>添加题目
                            </button>
                            <button class="px-4 py-2 bg-white border border-gray-300 text-dark rounded-lg shadow-sm hover:bg-gray-50 transition-colors">
                                <i class="fa fa-file-text-o mr-2"></i>导入题目
                            </button>
                        </div>
                        <div class="relative">
                            <input type="text" placeholder="搜索题目..." class="pl-10 pr-4 py-2 w-full md:w-80 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-muted"></i>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目ID</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目内容</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1001</td>
                                    <td class="px-6 py-4 max-w-xs truncate">已知二次函数 y = x² + bx + c 的图像经过点 (1, 0) 和 (2, 5)，求 b 和 c 的值。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">解答题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">数学 > 代数</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1002</td>
                                    <td class="px-6 py-4 max-w-xs truncate">以下哪个是Python的内置函数？</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">选择题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">编程 > Python</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-19</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1003</td>
                                    <td class="px-6 py-4 max-w-xs truncate">描述一下HTML5中新增的语义化标签及其作用。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">简答题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">Web开发 > HTML</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-18</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1004</td>
                                    <td class="px-6 py-4 max-w-xs truncate">在SQL中，如何实现两个表的内连接？请给出示例。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">操作题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">较难</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">数据库 > SQL</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-17</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">Q-1005</td>
                                    <td class="px-6 py-4 max-w-xs truncate">什么是算法的时间复杂度？请解释O(1)、O(n)和O(n²)的含义。</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">概念题</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">困难</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark">计算机基础 > 算法</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">2023-06-16</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button class="text-primary hover:text-primary/80 mr-3">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-red-500 hover:text-red-600">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <div class="text-sm text-muted">
                            显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">1,284</span> 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="px-3 py-1 rounded-lg bg-primary text-white">1</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">2</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">3</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">4</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">5</button>
                            <button class="px-3 py-1 rounded-lg border border-gray-300 text-muted hover:bg-gray-50">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 其他内容区域 (考试管理、数据分析、系统设置) 可以在这里添加 -->
        </div>
    </main>

    <!-- JavaScript -->
    <script>
        // 设置当前日期
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
            
            // 导航切换逻辑
            const navItems = document.querySelectorAll('.nav-item');
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            const contentSections = document.querySelectorAll('.content-section');
            const sidebarMenus = document.querySelectorAll('.sidebar-menu');
            
            // 顶部导航切换
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活动状态
                    navItems.forEach(i => i.classList.remove('active'));
                    sidebarMenus.forEach(menu => menu.classList.add('hidden'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    
                    // 获取对应侧边栏菜单
                    const section = this.getAttribute('data-section');
                    const sidebarMenu = document.getElementById(`${section}-menu`);
                    if (sidebarMenu) {
                        sidebarMenu.classList.remove('hidden');
                    }
                });
            });
            
            // 侧边栏项目切换
            sidebarItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活动状态
                    const parentMenu = this.closest('.sidebar-menu');
                    parentMenu.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                });
            });
            
            // 移动端菜单切换
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const sidebar = document.getElementById('sidebar');
            
            if (mobileMenuButton && sidebar) {
                mobileMenuButton.addEventListener('click', function() {
                    sidebar.classList.toggle('translate-x-0');
                    sidebar.classList.toggle('-translate-x-full');
                });
            }
            
            // 初始化移动端侧边栏状态
            function checkScreenSize() {
                if (window.innerWidth < 768) {
                    sidebar.classList.add('-translate-x-full');
                    sidebar.classList.remove('translate-x-0');
                } else {
                    sidebar.classList.remove('-translate-x-full');
                    sidebar.classList.add('translate-x-0');
                }
            }
            
            // 初始检查
            checkScreenSize();
            
            // 窗口大小变化时检查
            window.addEventListener('resize', checkScreenSize);
        });
    </script>
</body>
</html>
